<!-- <template>
    <input v-model="form.username" type="text" name="" id="">
    <br>
    <input v-model="form.password" type="text" name="" id="">
    <br>
    <button @click="login">登录</button>
</template>
<script setup lang='ts'>
import {reactive} from "vue"
import {Account} from "../interface"
import {Login} from "../api"
import {AxiosResponse} from "axios"
const form=reactive<Account>({
    username:'admin',
    password:'123456'
})


const login=async ()=>{
   let res:AxiosResponse=await Login(form)
   console.log(res)
}
</script>
<style scoped >
</style> -->


<template>
  <div class="login-container">
    <div class="logo">
      <van-image 
        width="100" 
        height="100" 
        src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png"
      />
      <h2>万云茶庄</h2>
    </div>
    
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      
      <div class="submit-btn">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
        >
          登录
        </van-button>
      </div>
    </van-form>
    
    <div class="register-link">
      <span @click="toRegister">还没有账号？立即注册</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Login } from '../api'
import type { Account } from '../api/interface'

const router = useRouter()
const form = reactive<Account>({
  username: 'admin',
  password: '123456'
})

const onSubmit = async () => {
  try {
    const res = await Login(form)
    if (res.status === 200) {
      router.push('/tool/index')
    }
  } catch (error) {
    console.error('登录失败:', error)
  }
}

const toRegister = () => {
  // 实际项目中跳转到注册页面
  console.log('跳转到注册页面')
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 0 20px;
  background: #fff;
}

.logo {
  text-align: center;
  margin-bottom: 50px;
}

.logo h2 {
  margin-top: 15px;
  font-weight: bold;
  color: #333;
}

.submit-btn {
  margin: 30px 16px;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #1989fa;
  font-size: 14px;
}
</style>
